<template>
    <div class="statistics-container fade-in">
        <div class="page-header">
            <div class="header-content">
                <div class="title-section">
                    <h2 class="page-title">
                        <el-icon class="title-icon">
                            <TrendCharts />
                        </el-icon>
                        费用统计
                    </h2>
                    <p class="page-subtitle">实时数据分析和可视化展示</p>
                </div>
                <div class="header-actions">
                    <el-button type="primary" plain @click="refreshData">
                        <el-icon><Refresh /></el-icon>
                        刷新数据
                    </el-button>
                    <el-button type="success" @click="exportReport">
                        <el-icon><Download /></el-icon>
                        导出报告
                    </el-button>
                </div>
            </div>
        </div>

        <div class="stats-overview">
            <el-row :gutter="24">
                <el-col :xs="24" :sm="12" :md="6">
                    <el-card class="stat-card total-users" shadow="hover">
                        <div class="stat-content">
                            <div class="stat-icon">
                                <el-icon><User /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ totalEntries }}</div>
                                <div class="stat-label">总报名人数</div>
                                <div class="stat-trend">
                                    <el-icon class="trend-icon up"><ArrowUp /></el-icon>
                                    <span class="trend-text">+12.5%</span>
                                    <span class="trend-period">较上月</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="12" :md="6">
                    <el-card class="stat-card total-income" shadow="hover">
                        <div class="stat-content">
                            <div class="stat-icon">
                                <el-icon><Money /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">¥{{ totalIncome.toFixed(2) }}</div>
                                <div class="stat-label">总收入</div>
                                <div class="stat-trend">
                                    <el-icon class="trend-icon up"><ArrowUp /></el-icon>
                                    <span class="trend-text">+8.3%</span>
                                    <span class="trend-period">较上月</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="12" :md="6">
                    <el-card class="stat-card unpaid-users" shadow="hover">
                        <div class="stat-content">
                            <div class="stat-icon">
                                <el-icon><Warning /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">{{ unpaidEntries }}</div>
                                <div class="stat-label">未缴费人数</div>
                                <div class="stat-trend">
                                    <el-icon class="trend-icon down"><ArrowDown /></el-icon>
                                    <span class="trend-text">-5.2%</span>
                                    <span class="trend-period">较上月</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :sm="12" :md="6">
                    <el-card class="stat-card avg-fee" shadow="hover">
                        <div class="stat-content">
                            <div class="stat-icon">
                                <el-icon><TrendCharts /></el-icon>
                            </div>
                            <div class="stat-info">
                                <div class="stat-number">¥{{ avgFee.toFixed(2) }}</div>
                                <div class="stat-label">平均费用</div>
                                <div class="stat-trend">
                                    <el-icon class="trend-icon up"><ArrowUp /></el-icon>
                                    <span class="trend-text">+2.1%</span>
                                    <span class="trend-period">较上月</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 数据可视化图表 -->
        <div class="charts-section">
            <div class="section-header">
                <h3>数据可视化分析</h3>
                <p>多维度数据展示和趋势分析</p>
            </div>
            <Charts />
        </div>

        <div class="charts-section">
            <el-row :gutter="24">
                <el-col :xs="24" :lg="12">
                    <el-card class="chart-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <div class="header-left">
                                    <el-icon class="header-icon"><PieChart /></el-icon>
                                    <span class="header-title">缴费状态分布</span>
                                </div>
                                <el-button type="text" class="export-btn">
                                    <el-icon><Download /></el-icon>
                                    导出
                                </el-button>
                            </div>
                        </template>
                        <div class="chart-container">
                            <div class="pie-chart">
                                <div class="chart-item">
                                    <div class="chart-circle paid">
                                        <div class="circle-progress" :style="{ transform: `rotate(${paidPercentage * 360}deg)` }"></div>
                                        <div class="circle-center">
                                            <span class="percentage">{{ (paidPercentage * 100).toFixed(1) }}%</span>
                                        </div>
                                    </div>
                                    <div class="chart-label">
                                        <span class="label-color paid"></span>
                                        <span>已缴费 ({{ paidEntries }})</span>
                                    </div>
                                </div>
                                <div class="chart-item">
                                    <div class="chart-circle unpaid">
                                        <div class="circle-progress" :style="{ transform: `rotate(${unpaidPercentage * 360}deg)` }"></div>
                                        <div class="circle-center">
                                            <span class="percentage">{{ (unpaidPercentage * 100).toFixed(1) }}%</span>
                                        </div>
                                    </div>
                                    <div class="chart-label">
                                        <span class="label-color unpaid"></span>
                                        <span>未缴费 ({{ unpaidEntries }})</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :xs="24" :lg="12">
                    <el-card class="chart-card" shadow="hover">
                        <template #header>
                            <div class="card-header">
                                <div class="header-left">
                                    <el-icon class="header-icon"><Histogram /></el-icon>
                                    <span class="header-title">各项目报名统计</span>
                                </div>
                                <el-button type="text" class="export-btn">
                                    <el-icon><Download /></el-icon>
                                    导出
                                </el-button>
                            </div>
                        </template>
                        <div class="chart-container">
                            <div class="bar-chart">
                                <div v-for="(item, index) in competitionStats" :key="index" class="bar-item">
                                    <div class="bar-label">{{ item.name }}</div>
                                    <div class="bar-container">
                                        <div class="bar" :style="{ width: `${item.percentage}%` }">
                                            <span class="bar-value">{{ item.count }}</span>
                                        </div>
                                    </div>
                                    <div class="bar-percentage">{{ item.percentage }}%</div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <div class="recent-activity">
            <el-card class="activity-card" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <div class="header-left">
                            <el-icon class="header-icon"><Clock /></el-icon>
                            <span class="header-title">最近活动</span>
                        </div>
                    </div>
                </template>
                <div class="activity-list">
                    <div v-for="(activity, index) in recentActivities" :key="index" class="activity-item">
                        <div class="activity-icon">
                            <el-icon><User /></el-icon>
                        </div>
                        <div class="activity-content">
                            <div class="activity-text">{{ activity.text }}</div>
                            <div class="activity-time">{{ activity.time }}</div>
                        </div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 导出报告对话框 -->
        <el-dialog 
            v-model="showExportDialog" 
            title="导出统计报告" 
            width="500px" 
            class="export-dialog"
            :close-on-click-modal="false">
            <div class="export-content">
                <div class="export-description">
                    <p>请选择要导出的报告格式：</p>
                    <p class="export-info">报告将包含统计概览、比赛项目统计和详细数据</p>
                </div>
                
                <div class="export-options">
                    <el-radio-group v-model="exportFormat" class="export-format-group">
                        <el-radio value="excel" class="export-option">
                            <div class="export-option-content">
                                <div class="export-icon excel">
                                    <el-icon><Download /></el-icon>
                                </div>
                                <div class="export-text">
                                    <div class="export-title">Excel格式</div>
                                    <div class="export-desc">包含多个工作表，适合数据分析</div>
                                </div>
                            </div>
                        </el-radio>
                        
                        <el-radio value="pdf" class="export-option">
                            <div class="export-option-content">
                                <div class="export-icon pdf">
                                    <el-icon><Download /></el-icon>
                                </div>
                                <div class="export-text">
                                    <div class="export-title">PDF格式</div>
                                    <div class="export-desc">适合打印和正式报告</div>
                                </div>
                            </div>
                        </el-radio>
                    </el-radio-group>
                </div>
            </div>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="showExportDialog = false">取消</el-button>
                    <el-button type="primary" @click="handleExport">
                        <el-icon><Download /></el-icon>
                        开始导出
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { 
    User, Money, Warning, Download, TrendCharts, Refresh, 
    ArrowUp, ArrowDown, PieChart, Histogram, Clock 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useEntriesStore } from '../stores/entries'
import * as XLSX from 'xlsx'
import jsPDF from 'jspdf'
import 'jspdf-autotable'
import Charts from '../components/Charts.vue'

const entriesStore = useEntriesStore()

// 基础统计数据
const totalEntries = computed(() => entriesStore.entries.length)
const paidEntries = computed(() => entriesStore.entries.filter(entry => entry.status === '已缴费').length)
const unpaidEntries = computed(() => entriesStore.entries.filter(entry => entry.status === '未缴费').length)
const totalIncome = computed(() => 
    entriesStore.entries
        .filter(entry => entry.status === '已缴费')
        .reduce((sum, entry) => sum + entry.fee, 0)
)
const avgFee = computed(() => 
    totalEntries.value > 0 ? totalIncome.value / totalEntries.value : 0
)

// 百分比计算
const paidPercentage = computed(() => 
    totalEntries.value > 0 ? paidEntries.value / totalEntries.value : 0
)
const unpaidPercentage = computed(() => 
    totalEntries.value > 0 ? unpaidEntries.value / totalEntries.value : 0
)

// 项目统计
const competitionStats = computed(() => {
    const stats = {}
    entriesStore.entries.forEach(entry => {
        if (!stats[entry.competition]) {
            stats[entry.competition] = {
                name: entry.competition,
                count: 0,
                totalFee: 0
            }
        }
        stats[entry.competition].count++
        stats[entry.competition].totalFee += entry.fee
    })
    
    return Object.values(stats).map(stat => ({
        ...stat,
        percentage: totalEntries.value > 0 ? Math.round((stat.count / totalEntries.value) * 100) : 0
    })).sort((a, b) => b.count - a.count)
})

// 最近活动
const recentActivities = ref([
    { text: '张三报名了篮球比赛', time: '2分钟前' },
    { text: '李四完成了足球比赛缴费', time: '5分钟前' },
    { text: '王五报名了游泳比赛', time: '10分钟前' },
    { text: '赵六完成了篮球比赛缴费', time: '15分钟前' },
    { text: '孙七报名了田径比赛', time: '20分钟前' }
])

const refreshData = () => {
    ElMessage.success('数据已刷新')
}

// 导出功能
const showExportDialog = ref(false)
const exportFormat = ref('pdf')

const exportReport = () => {
    showExportDialog.value = true
}

const handleExport = () => {
    showExportDialog.value = false
    
    switch (exportFormat.value) {
        case 'excel':
            exportToExcel()
            break
        case 'pdf':
            exportToPDF()
            break
        default:
            exportToPDF()
    }
}

// 导出为Excel格式
const exportToExcel = () => {
    try {
        // 创建多个工作表
        const wb = XLSX.utils.book_new()
        
        // 1. 统计概览工作表
        const overviewData = [
            { '指标': '总报名人数', '数值': totalEntries, '单位': '人' },
            { '指标': '总收入', '数值': totalIncome.toFixed(2), '单位': '元' },
            { '指标': '未缴费人数', '数值': unpaidEntries, '单位': '人' },
            { '指标': '平均费用', '数值': avgFee.toFixed(2), '单位': '元' },
            { '指标': '已缴费比例', '数值': paidPercentage.value + '%', '单位': '%' },
            { '指标': '未缴费比例', '数值': unpaidPercentage.value + '%', '单位': '%' }
        ]
        const ws1 = XLSX.utils.json_to_sheet(overviewData)
        XLSX.utils.book_append_sheet(wb, ws1, '统计概览')
        
        // 2. 比赛项目统计工作表
        const competitionData = competitionStats.value.map(stat => ({
            '比赛项目': stat.name,
            '报名人数': stat.count,
            '总收入': stat.totalFee.toFixed(2),
            '平均费用': (stat.totalFee / stat.count).toFixed(2)
        }))
        const ws2 = XLSX.utils.json_to_sheet(competitionData)
        XLSX.utils.book_append_sheet(wb, ws2, '比赛项目统计')
        
        // 3. 详细数据工作表
        const detailData = entries.value.map(entry => ({
            '姓名': entry.name,
            '比赛项目': entry.competition,
            '报名费': entry.fee,
            '状态': entry.status,
            '缴费日期': formatDate(entry.paymentDate),
            '创建时间': formatDate(entry.createTime)
        }))
        const ws3 = XLSX.utils.json_to_sheet(detailData)
        XLSX.utils.book_append_sheet(wb, ws3, '详细数据')
        
        // 生成文件名
        const fileName = `费用统计报告_${new Date().toLocaleDateString('zh-CN').replace(/\//g, '-')}.xlsx`
        
        // 下载文件
        XLSX.writeFile(wb, fileName)
        
        ElMessage.success('Excel报告导出成功')
    } catch (error) {
        console.error('导出Excel失败:', error)
        ElMessage.error('导出失败，请重试')
    }
}

// 导出为PDF格式
const exportToPDF = () => {
    try {
        const doc = new jsPDF()
        
        // 设置中文字体
        doc.addFont('https://cdn.jsdelivr.net/npm/noto-sans-sc@1.0.1/NotoSansSC-Regular.otf', 'NotoSansSC', 'normal')
        doc.setFont('NotoSansSC')
        
        // 标题
        doc.setFontSize(20)
        doc.text('费用统计报告', 105, 20, { align: 'center' })
        
        // 生成时间
        doc.setFontSize(10)
        doc.text(`生成时间: ${new Date().toLocaleString('zh-CN')}`, 105, 30, { align: 'center' })
        
        // 统计概览
        doc.setFontSize(14)
        doc.text('统计概览', 20, 50)
        
        doc.setFontSize(10)
        doc.text(`总报名人数: ${totalEntries} 人`, 20, 65)
        doc.text(`总收入: ¥${totalIncome.toFixed(2)}`, 20, 75)
        doc.text(`未缴费人数: ${unpaidEntries} 人`, 20, 85)
        doc.text(`平均费用: ¥${avgFee.toFixed(2)}`, 20, 95)
        doc.text(`已缴费比例: ${paidPercentage.value}%`, 20, 105)
        doc.text(`未缴费比例: ${unpaidPercentage.value}%`, 20, 115)
        
        // 比赛项目统计表格
        doc.setFontSize(14)
        doc.text('比赛项目统计', 20, 140)
        
        const tableData = competitionStats.value.map(stat => [
            stat.name,
            stat.count.toString(),
            `¥${stat.totalFee.toFixed(2)}`,
            `¥${(stat.totalFee / stat.count).toFixed(2)}`
        ])
        
        const headers = ['比赛项目', '报名人数', '总收入', '平均费用']
        
        doc.autoTable({
            head: [headers],
            body: tableData,
            startY: 150,
            styles: {
                fontSize: 9,
                cellPadding: 3
            },
            headStyles: {
                fillColor: [99, 102, 241],
                textColor: 255
            },
            alternateRowStyles: {
                fillColor: [248, 250, 252]
            }
        })
        
        // 生成文件名
        const fileName = `费用统计报告_${new Date().toLocaleDateString('zh-CN').replace(/\//g, '-')}.pdf`
        
        // 下载文件
        doc.save(fileName)
        
        ElMessage.success('PDF报告导出成功')
    } catch (error) {
        console.error('导出PDF失败:', error)
        ElMessage.error('导出失败，请重试')
    }
}

// 格式化日期
const formatDate = (date) => {
    if (!date) return '-'
    return new Date(date).toLocaleDateString('zh-CN')
}

// 添加图表交互功能
const chartOptions = computed(() => ({
    paidPercentage: paidPercentage.value,
    unpaidPercentage: unpaidPercentage.value,
    competitionStats: competitionStats.value
}))

// 模拟实时数据更新
const startDataSimulation = () => {
    setInterval(() => {
        // 随机更新一些数据
        if (Math.random() > 0.7) {
            // 模拟新数据
            const newEntry = {
                id: Date.now(),
                name: '新用户',
                competition: '测试比赛',
                fee: Math.floor(Math.random() * 200) + 50,
                paymentDate: new Date().toISOString().split('T')[0],
                status: Math.random() > 0.5 ? '已缴费' : '未缴费'
            }
            entriesStore.addEntry(newEntry)
        }
    }, 30000) // 每30秒检查一次
}

onMounted(() => {
    // 启动数据模拟
    startDataSimulation()
})
</script>

<style scoped>
.statistics-container {
    animation: fadeIn 0.5s ease-out;
}

.page-header {
    margin-bottom: var(--spacing-xl);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-lg);
}

.title-section {
    flex: 1;
}

.page-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.title-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.header-actions {
    display: flex;
    gap: var(--spacing-md);
}

.stats-overview {
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: var(--spacing-lg);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.stat-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.stat-card.total-users .stat-icon {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
}

.stat-card.total-income .stat-icon {
    background: linear-gradient(135deg, var(--success-color), #34d399);
}

.stat-card.unpaid-users .stat-icon {
    background: linear-gradient(135deg, var(--warning-color), #fbbf24);
}

.stat-card.avg-fee .stat-icon {
    background: linear-gradient(135deg, var(--info-color), #60a5fa);
}

.stat-info {
    flex: 1;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.trend-icon {
    font-size: 0.75rem;
}

.trend-icon.up {
    color: var(--success-color);
}

.trend-icon.down {
    color: var(--danger-color);
}

.trend-text {
    font-size: 0.75rem;
    font-weight: 600;
}

.trend-period {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.charts-section {
    margin-bottom: var(--spacing-xl);
}

.chart-card {
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.header-icon {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.header-title {
    font-weight: 600;
    color: var(--text-primary);
}

.export-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.chart-container {
    padding: var(--spacing-lg) 0;
    min-height: 300px;
}

.pie-chart {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}

.chart-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.chart-circle {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart-circle.paid {
    background: conic-gradient(var(--success-color) 0deg, var(--success-color) calc(var(--paid-percentage, 0) * 360deg), #e5e7eb calc(var(--paid-percentage, 0) * 360deg), #e5e7eb 360deg);
}

.chart-circle.unpaid {
    background: conic-gradient(var(--warning-color) 0deg, var(--warning-color) calc(var(--unpaid-percentage, 0) * 360deg), #e5e7eb calc(var(--unpaid-percentage, 0) * 360deg), #e5e7eb 360deg);
}

.circle-center {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.percentage {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.chart-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.label-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.label-color.paid {
    background: var(--success-color);
}

.label-color.unpaid {
    background: var(--warning-color);
}

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.bar-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.bar-label {
    width: 80px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: right;
}

.bar-container {
    flex: 1;
    height: 24px;
    background: var(--background-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.bar {
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--spacing-sm);
    transition: width 0.3s ease;
}

.bar-value {
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.bar-percentage {
    width: 50px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: right;
}

.recent-activity {
    margin-bottom: var(--spacing-xl);
}

.activity-card {
    border-radius: var(--radius-lg);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.activity-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.activity-item:hover {
    background: var(--background-light);
}

.activity-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
    }
    
    .header-actions {
        justify-content: center;
    }
    
    .pie-chart {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .chart-circle {
        width: 100px;
        height: 100px;
    }
    
    .circle-center {
        width: 60px;
        height: 60px;
    }
    
    .percentage {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .page-title {
        font-size: 1.5rem;
    }
    
    .stat-content {
        padding: var(--spacing-md);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    .chart-circle {
        width: 80px;
        height: 80px;
    }
    
    .circle-center {
        width: 50px;
        height: 50px;
    }
    
    .percentage {
        font-size: 0.875rem;
    }
}

/* 导出对话框样式 */
.export-dialog {
    border-radius: var(--radius-xl);
}

.export-content {
    padding: var(--spacing-md) 0;
}

.export-description {
    margin-bottom: var(--spacing-xl);
}

.export-description p {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.export-info {
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
}

.export-options {
    margin-bottom: var(--spacing-lg);
}

.export-format-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.export-option {
    margin: 0 !important;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.export-option:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.05);
}

.export-option.is-checked {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
}

.export-option-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.export-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
}

.export-icon.excel {
    background: linear-gradient(135deg, #217346, #1e6b3d);
}

.export-icon.pdf {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

.export-text {
    flex: 1;
}

.export-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.export-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* 图表部分样式 */
.charts-section {
    margin-top: var(--spacing-xl);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.section-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .export-option-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .export-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .section-header h3 {
        font-size: 1.25rem;
    }
}
</style>